<template>
  <h2>当前求和为: {{ sum }}</h2>
  <button @click="sum++">点我加1</button>
</template>

<script>
import { ref, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted } from "vue"; // ref处理基本类型数据  reactive处理引用类型数据
export default {
  name: "demo",
  setup() {
    console.log('---setup---')
    let sum = ref(0);

    // 通过组合式API的形式去使用生命周期钩子
    onBeforeMount(()=>{
      console.log('---onBeforeMount---', '初始化先执行')
    })
    onMounted(()=>{
      console.log('---onMounted---', '初始化后执行')
    })
    onBeforeUpdate(()=>{
      console.log('---onBeforeUpdate---', '点我加1先执行')
    })
    onUpdated(()=>{
      console.log('---onUpdated---', '点我加1后执行')
    })
    onBeforeUnmount(()=>{
      console.log('---onBeforeUnmount---', '切换隐藏先执行')
    })
    onUnmounted(()=>{
      console.log('---onUnmounted---', '切换隐藏后执行')
    })

    return {
      sum,
    };
  },

  // 通过配置项的形式使用生命周期钩子
  // beforeCreate() {
  //   console.log("---beforeCreate---");
  // },
  // created() {
  //   console.log("---created---");
  // },
  // beforeMount() {
  //   console.log("---beforeMount---");
  // },
  // mounted() {
  //   console.log("---mounted---");
  // },
  // beforeUpdate() {
  //   console.log("---beforeUpdate---");
  // },
  // updated() {
  //   console.log("---updated---");
  // },
  // beforeUnmount() {
  //   console.log("---beforeUnmount---");
  // },
  // unmounted() {
  //   console.log("---unmounted---");
  // }
};
</script>


